<template>
  <div class="banxin zuti">
      <div class="zuti_l">
          <div class="zhu">
              <div class="zuti_l_zu">
                  <h3>推荐</h3>
                  <p :class="{active:patt=='推荐歌手'}" @click="$router.push('/geshou')">推荐歌手</p>
                  <p :class="{active:patt=='入职歌手'}" @click="$router.push('/geshou/gesruzges')">入职歌手</p>
              </div>
              <div class="zuti_l_zu">
                  <h3>华语</h3>
                  <p  :class="{active:patt=='华语男歌手'}" @click="aaa">华语男歌手</p>
                  <p :class="{active:patt=='华语女歌手'}" >华语女歌手</p>
                  <p :class="{active:patt=='华语组合/乐队'}" >华语组合/乐队</p>
              </div>
              <div class="zuti_l_zu">
                  <h3>欧美</h3>
                  <p  :class="{active:patt=='欧美男歌手'}" @click="aaa">欧美男歌手</p>
                  <p :class="{active:patt=='欧美女歌手'}" >欧美女歌手</p>
                  <p :class="{active:patt=='欧美组合/乐队'}" >欧美组合/乐队</p>
              </div>
              <div class="zuti_l_zu">
                  <h3>日本</h3>
                  <p  :class="{active:patt=='日本男歌手'}" @click="aaa">日本男歌手</p>
                  <p :class="{active:patt=='日本女歌手'}" >日本女歌手</p>
                  <p :class="{active:patt=='日本组合/乐队'}" >日本组合/乐队</p>
              </div>
              <div class="zuti_l_zu">
                  <h3>韩国</h3>
                  <p  :class="{active:patt=='韩国男歌手'}" @click="aaa">韩国男歌手</p>
                  <p :class="{active:patt=='韩国女歌手'}" >韩国女歌手</p>
                  <p :class="{active:patt=='韩国组合/乐队'}" >韩国组合/乐队</p>
              </div>
              <div class="zuti_l_zu">
                  <h3>其他</h3>
                  <p  :class="{active:patt=='其他男歌手'}" @click="aaa">其他男歌手</p>
                  <p :class="{active:patt=='其他女歌手'}" >其他女歌手</p>
                  <p :class="{active:patt=='其他组合/乐队'}" >其他组合/乐队</p>
              </div>
              
          </div>
          
      </div>
      <div class="zuti_r">
          <router-view/>
      </div>
  </div>
</template>

<script>
export default {
  data () {
      return {
          //文本类名控制
          patt:'推荐歌手',

      }
  },
  methods:{
      aaa(){
          this.$router.push('/geshou/gesdqges')
      }
  }
}
</script>

<style lang = "less" scoped>
  @import "../assets/base.less";
  .zuti{
    background-color: #fff;
      display: flex;
      border-left: 1px solid #ccc;
      border-right: 1px solid #ccc;
      .zuti_l{
          width: 180px;
          border-right: 1px solid #ccc;
          .zhu{
              width: 180px;
              box-sizing: border-box;
              padding: 0px 10px 40px;
              margin-top: 51px;
          }
          .zuti_l_zu{
              width: 160px;
              font-size: 12px;
              color: #333;
              margin-top: 5px;
              box-sizing: border-box;
              padding-top: 16px;
              border-bottom: 1px solid #ccc;
              h3{
              font-size: 16px;           
              padding-left: 14px;
              line-height: 25px;
              }
              p{
                  display: block;
                  width: 160px;
                  height: 29px;
                  padding-left: 27px;
                  padding-top: 6px;
                  box-sizing: border-box;
                  cursor: pointer;
                  background: url('../assets/singer.png') no-repeat 0px -31px;
                  &.active{
                      color: #c20c0c;
                      background: url('../assets/singer.png') no-repeat;
                  }
                  &:hover{
                      text-decoration: underline
                  }
              }
          }
          
      }
      .zuti_r{
          width: 799px;
          box-sizing: border-box;
          padding: 40px;
      }
  }
</style>